<template>
  <!--领养-->
  <div class="adoptBox">
    <div
      class="adopt"
      v-for="item in userAdoptPetList"
      :key="item.pet_id"
      @click="handlePetDetails(item.pet_id)"
    >
      <ListItem :petList="item" />
    </div>
    <!--为空-->
    <Empty class="empty" v-if="userAdoptPetList.length <= 0" />
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import { getRecommend } from "@/api/home";
import ListItem from "@/components/ListItem";
import Empty from "@/components/Empty";

export default {
  name: "DetailsLike",
  components: { Empty, ListItem },
  setup() {
    const router = useRouter();
    //筛选领养的宠物列表
    const { userAdoptPetList, getAllPetList } = handleGetAllPetList();
    getAllPetList();
    //进入详情
    const handlePetDetails = (value) => {
      router.push(`/petTable/${value}`);
    };
    return { userAdoptPetList, handlePetDetails };
  },
};

//获取所有宠物列表
function handleGetAllPetList() {
  // const store = useStore();
  const route = useRoute();
  const userAdoptPetList = ref([]);
  const getAllPetList = () => {
    //初始化---解决再次调用不重复push
    userAdoptPetList.value = [];
    getRecommend("all").then((res) => {
      // console.log(res);
      //筛选领养成功的宠物
      res.data?.forEach((item) => {
        if (
          item.adopter_id === route.path.split("/")[2] &&
          item.pet_collar_status == "true"
        ) {
          // console.log(item);
          userAdoptPetList.value.push(item);
        }
      });
    });
  };
  return { userAdoptPetList, getAllPetList };
}
</script>

<style scoped lang="less">
.adoptBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.adopt {
  width: 44%;
  height: 12rem;
  margin: 0.3rem;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0px 1px 4px 0px #c98d61;
}
.empty {
  margin: 0;
}
</style>
